(function () {
        var format = function (dateFormat) {
            var options = {
                dom: document.getElementById('Canvas'),
                isCollapsible: document.getElementById('CollapsibleView').checked,
                quoteKeys: document.getElementById('QuoteKeys').checked,
                tabSize: document.getElementById('TabSize').value,
                dateFormat: dateFormat
            };
            window.jf = new JsonFormatter(options);
            jf.doFormat(document.getElementById('RawJson').value);
        };
        document.getElementById('format').addEventListener('click', function() {
            format(false);
            $('#RawJson').val($('.jf-CodeContainer').text());
        });
        document.getElementById('dateFormat').addEventListener('click', function() {
            format(true);
            $('#RawJson').val($('.jf-CodeContainer').text());
        });
        document.getElementById('expandAll').addEventListener('click', function() {
            window.jf.expandAll();
        });
        document.getElementById('collapseAll').addEventListener('click', function() {
            window.jf.collapseAll();
        });
        var x = document.querySelectorAll('#TabSize, #CollapsibleView, #QuoteKeys');
        Array.prototype.forEach.call(x, function(el, i) {
            el.addEventListener('change', function () {
                format();
            });
        });

        document.getElementById('minBtn').addEventListener('click', function() {
            slideToggleAll();
        });

        $('.expand').on('click', function(){
            expandN($(this).attr('num'));
        });
    
    })();

    function expandN(num){
        window.jf.collapseLevel(num);
    }
    
    function slideToggleAll(argument) {
        $("#RawJson").slideToggle();
        $("#ControlsRow").slideToggle();
    }